<template>
	<view>
		<Header title="数据列表" name="plus"></Header>
		<view class="main_wrap">
			<van-search  shape="round" input-class="iput" :value="value" placeholder="请输入苗木编号进行搜索" left-icon="scan" right-icon="search"></van-search>
			<view class="main">
				<view class="main_item" v-for="item in 9">
					<view class="miaomu_id">YYY-XXX-III</view>
					<view class="miaomu_tag" >
						<van-row>
							<van-col span="19">
								<van-tag plain round size="large">桂热一号</van-tag>
								<van-tag plain round size="large">龙合镇东合村</van-tag>
								<van-tag plain round size="large">张三</van-tag>
								
							</van-col>
							
							<van-col span="5">
								<van-progress percentage="10"  stroke-width="20"  color="#81f061"/>
							</van-col>
						</van-row>
						
						<!-- <view class="left">
							<van-tag plain round size="large">桂热一号</van-tag>
							<van-tag plain round size="large">龙合镇东合村</van-tag>
							<van-tag plain round size="large">张三</van-tag>
						</view>
						<view class="right">
							<van-progress percentage="60"  stroke-width="20"  color="#81f061"/>
						</view> -->
						
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	
	export default {
		data() {
			return {
				value:'',
				
			}
		},
		components:{
			Header,
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .van-tag{
		margin-right: 10rpx;
	}
.main_wrap{
	padding: 15rpx 10rpx 0 10rpx;
	/deep/ .iput{
		padding-left: 20rpx ;
		border-left: 1px solid red ;
		
	}
	/deep/ .van-icon{
		color: #5157ee;
	}
	/deep/ .search{
		border: 1px solid red;
	}
	/deep/ .van-search{
		padding-left: 0;
		padding-right: 0;
	}
	/deep/ .van-search__content{
		border: 1px solid #5157ee;
	}
	.main{
		padding: 20rpx 20rpx 20rpx;
		border: 1px solid red;
		// height: 400rpx;
		.main_item{
			border: 1px solid orange;
			border-radius: 10rpx;
			padding: 10rpx 8rpx 10rpx 20rpx;
			margin-bottom: 20rpx;
			.miaomu_id{
				font-weight: bold;
				color: #000000;
			}
			.miaomu_tag{
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				.left{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
}
</style>
